<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1670955_idowo3hln9.css">
    <link rel="stylesheet" href="toolkit/mui-master/dist/css/mui.min.css">
    <link rel="stylesheet" href="toolkit/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="toolkit/range-slider/ion.rangeSlider.min.css">
    <link rel="stylesheet" href="tools.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://at.alicdn.com/t/font_1670955_idowo3hln9.js"></script>
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/popper.min.js"></script>
    <script src="toolkit/mui-master/dist/js/mui.min.js"></script>
    <script src="toolkit/bootstrap/js/bootstrap.min.js"></script>
    <script src="toolkit/range-slider/ion.rangeSlider.min.js"></script>
    <script src="tools.js"></script>
    <script src="js/plugins/owl.carousel.min.js"></script>
    <script src="js/app.js"></script>
    <title>Video Clip</title>
</head>

<body>
    <!--加载页面-->
    <div class="loading">
        <div class="spinner-grow"></div>
    </div>
    <!--标题栏-->
    <div class="appHeader" style="position: relative; z-index: 0;">
        <div class="left">
            <a href="homepage.html" class="icon toggleSidebar">
                <i class="icon ion-ios-arrow-back"></i>
            </a>
        </div>
        <div class="pageTitle">
            视频制作
        </div>
    </div>
    <!--主视频-->
    <div id="mainVideo">
        <video id="video" class="video-container" controls="controls" poster="./img/poster.jpeg">
            <source src="/home/yuwen/Downloads/video.mp4" type="video/mp4">
        </video>
    </div>
    <!--导航栏-->
    <div id="navigation">
        <div class="tab-content" id="pills-tabContent">
            <!--上传-->
            <div class="tab-pane fade show active" id="pills-shangchuan" role="tabpanel">
                <button id="selectVideoFromLocal" class="btn btn-primary video-button">本地上传</button>
                <button id="selectVideoFromCloud" class="btn btn-danger video-button">热门视频</button>
                <button id="takeNewVideo" class="btn btn-success video-button">拍摄视频</button>
            </div>
            <!--滤镜-->
            <div class="tab-pane fade" id="pills-lvjing" role="tabpanel">
                <div class="mui-card">
                    <div id="filter1" class="mui-card-content">
                        <svg id="lvjing1" class="iconfont icon" aria-hidden="true">
                            <use xlink:href="#icon-queren"></use>
                        </svg>
                    </div>
                    <div class="mui-card-footer">
                        原始
                    </div>
                </div>
                <div class="mui-card">
                    <div id="filter2" class="mui-card-content">
                        <svg id="lvjing2" class="iconfont icon" aria-hidden="true">
                            <use xlink:href="#icon-queren"></use>
                        </svg>
                    </div>
                    <div class="mui-card-footer">
                        底片
                    </div>
                </div>
                <div class="mui-card">
                    <div id="filter3" class="mui-card-content">
                        <svg id="lvjing3" class="iconfont icon" aria-hidden="true">
                            <use xlink:href="#icon-queren"></use>
                        </svg>
                    </div>
                    <div class="mui-card-footer">
                        滤镜2
                    </div>
                </div>
                <div class="mui-card">
                    <div id="filter4" class="mui-card-content">
                        <svg id="lvjing4" class="iconfont icon" aria-hidden="true">
                            <use xlink:href="#icon-queren"></use>
                        </svg>
                    </div>
                    <div class="mui-card-footer">
                        滤镜3
                    </div>
                </div>
                <div class="mui-card">
                    <div id="filter5" class="mui-card-content">
                        <svg id="lvjing5" class="iconfont icon" aria-hidden="true">
                            <use xlink:href="#icon-queren"></use>
                        </svg>
                    </div>
                    <div class="mui-card-footer">
                        滤镜4
                    </div>
                </div>
                <div class="mui-card">
                    <div id="filter6" class="mui-card-content">
                        <svg id="lvjing6" class="iconfont icon" aria-hidden="true">
                            <use xlink:href="#icon-queren"></use>
                        </svg>
                    </div>
                    <div class="mui-card-footer">
                        滤镜5
                    </div>
                </div>
                <div class="mui-card">
                    <div id="filter7" class="mui-card-content">
                        <svg id="lvjing7" class="iconfont icon" aria-hidden="true">
                            <use xlink:href="#icon-queren"></use>
                        </svg>
                    </div>
                    <div class="mui-card-footer">
                        滤镜6
                    </div>
                </div>
                <div class="mui-card">
                    <div id="filter8" class="mui-card-content">
                        <svg id="lvjing8" class="iconfont icon" aria-hidden="true">
                            <use xlink:href="#icon-queren"></use>
                        </svg>
                    </div>
                    <div class="mui-card-footer">
                        滤镜7
                    </div>
                </div>
            </div>
            <!--剪辑-->
            <div class="tab-pane fade" id="pills-jianji" role="tabpanel">
                <div id="frames" class="container-row"></div>
                <input type="text" class="js-range-slider" />
                <div class="mui-input-row">
                    <label>持续时间</label>
                    <input id="cutDuration" type="text" class="label-font" value="60 s">
                </div>
                <div class="mui-input-row mui-input-range">
                    <label>播放倍速</label>
                    <input id="videoSpeed" type="range" min="0.25" max="3" step="0.25" value="1">
                </div>
            </div>
            <!--混声-->
            <div class="tab-pane fade" id="pills-hunsheng" role="tabpanel">
                <div class="mui-input-row">
                    <label>消音</label>
                    <div id="muted" class="mui-switch">
                        <div class="mui-switch-handle"></div>
                    </div>
                </div>
                <div class="mui-input-row mui-input-range">
                    <label>音量</label>
                    <input type="range" min="-99" max="99">
                </div>
                <div class="mui-input-row">
                    <div class="container-row">
                        <label>背景音</label>
                        <label id="backgroundMusicLabel">待上传</label>
                        <button type="button" id="addBackgroundMusic"
                            class="btn btn-warning btn-sm rounded audio-button">
                            点击添加
                        </button>
                    </div>
                </div>
                <div class="mui-input-row">
                    <div class="container-row">
                        <label>配音</label>
                        <label id="dialectLabel">待上传</label>
                        <button type="button" id="addDialect"
                            class="btn btn-success btn-sm rounded audio-button">
                            点击添加
                        </button>
                    </div>
                </div>
            </div>
            <!--合成-->
            <div class="tab-pane fade" id="pills-hecheng" role="tabpanel">
                <div class="mui-input-row">
                    <label>发布动态</label>
                    <div id="muted" class="mui-switch mui-active">
                        <div class="mui-switch-handle"></div>
                    </div>
                </div>
                <div class="mui-input-row">
                    <label>本地保存</label>
                    <div id="localSave" class="mui-switch mui-active">
                        <div class="mui-switch-handle"></div>
                    </div>
                </div>
                <div class="mui-input-row">
                    <label>保存名称</label>
                    <input id="localSaveName" type="text" class="form-control label-font"
                        placeholder="请输入文件名" value="我创作的视频">
                </div>
                <button id="render" type="button" class="btn btn-primary btn-block">
                    开始渲染
                </button>
            </div>
        </div>
        <!--导航标题-->
        <ul class="nav nav-pills" id="pills-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#pills-shangchuan">
                    <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan"></use>
                    </svg>
                    <span>上传</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#pills-lvjing">
                    <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-lvjing"></use>
                    </svg>
                    <span>滤镜</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#pills-jianji">
                    <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-jianji"></use>
                    </svg>
                    <span>剪辑</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#pills-hunsheng">
                    <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-tianjiapeile"></use>
                    </svg>
                    <span>混声</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#pills-hecheng">
                    <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan"></use>
                    </svg>
                    <span>合成</span>
                </a>
            </li>
        </ul>
    </div>
    <!--音频选择器-->
    <div id="chooseAudio" class="box mui-popover mui-popover-action mui-popover-bottom">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <button id="selectAudioFromLocal" type="button" class="btn btn-light btn-block"
                    data-dismiss="modal">
                    从本地文件中选取
                </button>
            </li>
            <li class="mui-table-view-cell">
                <button id="recordNewAudio" type="button" class="btn btn-light btn-block"
                    data-dismiss="modal">
                    录制新的音频
                </button>
            </li>
            <li class="mui-table-view-cell">
                <button id="selectAudioFromWeb" type="button" class="btn btn-light btn-block"
                    data-dismiss="modal">
                    嗨方言热门歌曲/音效
                </button>
            </li>
        </ul>
    </div>
    <!--渲染结果-->
    <button type="button" data-toggle="modal" id="showRenderModal" data-target="#renderProgress"></button>
    <div class="modal fade" id="renderProgress" data-backdrop="static" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="renderProgressLabel">视频渲染中...</h5>
                </div>
                <div class="modal-body">
                    <div class="progress">
                        <div id="renderBar" class="progress-bar bg-success" role="progressbar"></div>
                    </div>
                    <video id="outputVideo" class="video-container" controls="controls"
                        poster="./img/poster.jpeg">
                        <source src="" type="video/mp4">
                    </video>
                </div>
                <div class="modal-footer">
                    <button id="cancelRendering" type="button" class="btn btn-danger btn-block"
                        data-dismiss="modal">
                        终止渲染
                    </button>
                    <button id="backToEdit" type="button" class="btn btn-outline-danger btn-block"
                        data-dismiss="modal">
                        返回编辑
                    </button>
                    <button id="postNews" type="button" class="btn btn-outline-primary btn-block">
                        发布动态
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--录音内嵌-->
    <button type="button" data-toggle="modal" id="showRecordingModal" data-target="#recording"></button>
    <div class="modal fade show" id="recording" data-backdrop="static" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">录制音频</h5>
                    <h5 id="recordingTimeLeft" class="modal-title"></h5>
                </div>
                <div class="modal-body">
                    <video id="recordingVideo" muted="muted" class="video-container"
                        poster="./img/poster.jpeg">
                        <source src="" type="video/mp4">
                    </video>
                    <div class="progress">
                        <div id="recordingBar" class="progress-bar bg-success" role="progressbar"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="icon-group">
                        <svg class="iconfont icon" aria-hidden="true">
                            <use id="recordingCancel" xlink:href="#icon-cuo"></use>
                        </svg>
                        <svg class="iconfont icon-large" aria-hidden="true">
                            <use id="recordingPlay" xlink:href="#icon-bofang"></use>
                        </svg>
                        <svg class="iconfont icon" aria-hidden="true">
                            <use id="recordingCheck" xlink:href="#icon-dui"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>